import Workplace from "../../components/layout/workplace";
import { Row, Col, Breadcrumb } from "antd";
import useSWR from "swr";
import fetcher from "../../components/fetcher";
import LoadingSpin from "../../components/spin-loading";

const ModifyProfile = () => {
  const { data, error } = useSWR("/api/profile", fetcher);
  // BUG: data may not always be ready, so when read data.name, it will fail
  if (error) {
    console.log("fetch data error:", error);
  }
  if (!data) {
    return <LoadingSpin />;
  }

  const breadcrumb = (
    <Breadcrumb>
      <Breadcrumb.Item>人员信息管理</Breadcrumb.Item>
      <Breadcrumb.Item>查询与修改</Breadcrumb.Item>
    </Breadcrumb>
  );

  // TODO: retrieve all users to show
  return (
    <Workplace
      profile={data}
      currentTab="modify_person"
      breadcrumb={breadcrumb}
    >
      <Row justify="center" align="top">
        <Col>
          <h1>hi</h1>
        </Col>
      </Row>
    </Workplace>
  );
};

export default ModifyProfile;
